<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
  	<meta charset="utf-8">
    <title>增加模版</title>
	<%@ include file="/page/common/common.jsp" %>	
	<%@ include file="/page/common/bootstrap.jsp" %>
	
    <script type="text/javascript">
    	
    	/** 显示新增文字标签对话框 */
    	function showTextModal(){
    		$("#textEditFlag").val("");//标记处于新增模式
    		$("#textModal").modal('show');//显示
    	}
    	
    	/** 显示新增变量标签对话框 */
    	function showVarModal(){
    		$("#varEditFlag").val("");//标记处于新增模式
    		$("#varModal").modal('show');//显示
    	}
    	
    	/** 增加文字标签 */
    	function addTextLabel(){
    		var $templateLabel=$("#templateLabel");
    		var label_text=$("#label-text").val();
    		var textEditFlag=$("#textEditFlag").val();
    		if($.trim(label_text)==""){
    			alert('请输入文字标签内容');
    			return;
    		}
    		
    		if(textEditFlag==""){//代表是增加模式
    			//编辑事件
	    		var $label_text_text=$('<span value="'+label_text+'" pre="'+label_text+'">'+label_text+'</span>');
	    		//删除事件
	    		var $label_text_close=$('<span class="label-close" title="点击删除">X</span>');
	    		var $label_text=$('<span class="label label-info" title="点击编辑"></span>').append($label_text_text).append($label_text_close);
	    		
	    		$templateLabel.append($label_text);//增加一个标签
	    		
	    		$label_text_text.click(function(){
	    			$(this).parent().attr('edit','true');//标记当前标签处于编辑模式
	    			$("#textEditFlag").val("true");//标记处于编辑模式
	    			$("#label-text").val($(this).text());
	    			$("#textModal").modal('show');
	    		});
	    		$label_text_close.click(function(){
	    			$(this).parent().remove();//把自己干掉
	    			preview();
	    		});
    		}else{//代表编辑模式
    			//查找处于编辑模式的span
    			var $span=$templateLabel.children('span.label');
    			var $editSpan;
    			for(var i=0;i<$span.length;i++){
    				if($($span[i]).attr('edit')=='true'){
    					$editSpan=$($span[i]);
    					break;
    				}
    			}
    			if($editSpan){//更换文字
    				var $sp=$($editSpan.children()[0]);	
    				$sp.attr('value',label_text);
    				$sp.attr('pre',label_text);
    				$sp.text(label_text);
    			}
    			$editSpan.attr('edit','');//结束编辑模式
    		}

    		preview();
    		
    		$("#textModal").modal('hide');//隐藏
    		$("#label-text").val('');//清空输入框
    	}
    	
    	/** 增加变量标签 */
    	function addVarLabel(){
    		var $templateLabel=$("#templateLabel");
    		var $radio=$("#varForm input:checked");
    		
    		if($radio.length==0){
    			alert('请选择变量');
    			return;
    		}
    		
    		var label_text=$radio.val();
    		var label_val=$radio.attr('expression');
    		var label_pre=$radio.attr('pre');
    		var varEditFlag=$("#varEditFlag").val();
    		if(varEditFlag==""){//新增模式
    			//编辑事件
	    		var $label_text_text=$('<span value="'+label_val+'" pre="'+label_pre+'">'+label_text+'</span>');
	    		//删除事件
	    		var $label_text_close=$('<span class="label-close" title="点击删除">X</span>');
	    		var $label_text=$('<span class="label label-success" title="点击编辑"></span>').append($label_text_text).append($label_text_close);
	    		
	    		$templateLabel.append($label_text);//增加一个标签
	    		
	    		$label_text_text.click(function(){
	    			$(this).parent().attr('edit','true');//标记当前标签处于编辑模式
		    		$("#varEditFlag").val("true");//标记处于编辑模式
	    			$("#varModal").modal('show');
	    		});
	    		
	    		$label_text_close.click(function(){
	    			$(this).parent().remove();//把自己干掉
	    			preview();
	    		});
    		}else{//编辑模式
    			//查找处于编辑模式的span
    			var $span=$templateLabel.children('span.label');
    			var $editSpan;
    			for(var i=0;i<$span.length;i++){
    				if($($span[i]).attr('edit')=='true'){
    					$editSpan=$($span[i]);
    					break;
    				}
    			}
    			if($editSpan){//更换文字
    				var $sp=$($editSpan.children()[0]);	
    				$sp.attr('value',label_val);
    				$sp.attr('pre',label_pre);
    				$sp.text(label_text);
    			}
    			$editSpan.attr('edit','');//结束编辑模式
    		}
    		
			preview();
			
    		$("#varModal").modal('hide');//隐藏
    	}
    	
    	/** 模版预览功能 */
    	function preview(){
    		var $templateLabel=$("#templateLabel");
    		var $span=$templateLabel.children("span.label");
    		var previewContent="";
    		for(var i=0;i<$span.length;i++){
    			var pre_text=$($($span[i]).children("span")[0]).attr("pre");
    			previewContent+=pre_text;
    		}
    		
    		if(previewContent.length>300){
    			alert("当前字数"+previewContent.length+"，字数超过了300");
    			return;
    		}
    		
    		$("#templatePreview").text(previewContent);
    	}
    	
    	/** 获得模版 */
    	function getTemplate(){
    		if($("#templatePreview").text().length>300){
    			alert("当前字数"+previewContent.length+"，字数超过了300");
    			return;
    		}
    		
    		var $templateLabel=$("#templateLabel");
    		var $span=$templateLabel.children("span.label");
    		var templateContent="";
    		var labelText=[];
    		var labelVal=[];
    		var labelPre=[];
    		for(var i=0;i<$span.length;i++){
    			var $sp = $($($span[i]).children("span")[0]);
    			var pre_text=$sp.attr("value");
    			templateContent+=pre_text;
    			labelText.push($sp.text());
    			labelVal.push(pre_text);
    			labelPre.push($sp.attr("pre"));
    		}
    		
    		return {
    			templateContent:templateContent,
    			labelText:labelText,
    			labelVal:labelVal,
    			labelPre:labelPre
    		};
    		
    	}
    	
    	/** 保存模版 */
    	function saveTemp(){
    		var tempData=getTemplate();
    		
    		var templateName=$.trim($("#templateName").val());//名称
    		var templateType=$("#templateType").val();//类型
    		var templateContent=tempData.templateContent;//模版内容
    		var remark=$("#remark").val();//备注
    		
    		if(templateName==""){
    			alert("请输入模版名");
    			return;
    		}
    		if(templateContent==""){
    			alert("请先编辑模版标签");
    			return;
    		}
			
    		
    		var data={
    			templateName:templateName,
    			templateType:templateType,
    			templateContent:templateContent,
    			remark:remark,
    			labelText:tempData.labelText,
    			labelVal:tempData.labelVal,
    			labelPre:tempData.labelPre
    		};
    		
    		$.post('${ctx}/sys/template/add.sys',data,function(data){
	        		if(data.success){//操作成功
						$.messager.alert('提示','操作成功','info',function(){
							location.href="${ctx}/page/sys/template/template_list.jsp";
						});	        			
					}else{
						$.messager.alert('提示',data.msg,'warning');	
					}
	        	});
    	}
    	
	</script>	
	
	<style type="text/css">
		.label{
			font-size: 12px;
			padding: 4px;
			margin: 3px 1px;
			cursor: pointer;
		}
		
		.label-close{
			margin-left: 8px;
			font-weight: bolder;
		}
	</style>
  </head>
  
  <body>
	  <div class="container">
	  	<div class="span11 well" style="margin-top: 20px;">
		    <form class="form-horizontal" id="tempForm" action="waiting.jsp">
		   	  <input type="hidden" name="method" value="rtPass">
			  <fieldset>
			    <legend>增加新的模版信息</legend>
			    <div class="control-group">
				    <label class="control-label" for="templateName"">模版名称：</label>
				    <div class="controls">
				   	 	<input type="text" placeholder="模版名" name="templateName" id="templateName" class="required" minLength="1" maxLength="20"/>		   	 	
				    </div>
				</div>
				<div class="control-group">
				    <label class="control-label" for="templateType">模版类型：</label>
				    <div class="controls">
				   	 	<select name="templateType" id="templateType">
				   	 		<option value="${constant.TEMP_TYPE_ETDZ}">出票模版</option>
				   	 		<option value="${constant.TEMP_TYPE_BZCHB}">不正常航班模版</option>
				   	 		<option value="${constant.TEMP_TYPE_OTHER}">其他模版</option>
				   	 	</select>		   	 	
				    </div>
				</div>
				<div class="control-group">
					<label class="control-label">编辑模版：</label>
					<div class="controls">					
						<div class="span8 well" id="templateLabel" style="background-color: #fff;margin-left: 0px;">
							<!-- 
							<span class="label label-info" title="点击编辑">尊敬的旅客您好，您乘坐的航班<span class="label-close" title="点击删除">x</span></span>
							<span class="label label-success">【航班号】<span class="label-close">x</span></span>
							<span class="label label-info">将于<span class="label-close">x</span></span>
							<span class="label label-success">【起飞时间】<span class="label-close">x</span></span>
							<span class="label label-info">在<span class="label-close">x</span></span>
							<span class="label label-success">【起飞机场】<span class="label-close">x</span></span>
							<span class="label label-info">起飞，请您提前90分钟到机场办理乘机手续，谢谢<span class="label-close">x</span></span>
							 -->
						</div>
						<a class="btn btn-info"  href="javascript:void(0);" onclick="showTextModal();"><i class="icon-white icon-font"></i>添加文字标签</a>
						<a class="btn btn-success"  href="javascript:void(0);" onclick="showVarModal();"><i class="icon-white icon-tag"></i>添加变量标签</a>
						<span class="help-inline">说明：<span class="status-info">蓝色</span>标签代表文本文字，<span class="status-success">绿色</span>标签代表变量；点击标签编辑，点击X号删除</span>					
					</div>
									
				</div>
				<div class="control-group">
					<label class="control-label">预览模版：</label>
					<div class="controls">
						<div class="well span8" style="background-color: #fff;margin-left: 0px;" id="templatePreview">
							
						</div>
						<span class="help-inline" id="preTip">最多可以输入300个字</span>
					</div>
					
				</div>
				<div class="control-group">
					<label class="control-label">备注信息：</label>
					<div class="controls">
						<textarea rows="5" name="remark" id="remark"  placeholder="请输入备注信息"></textarea>
					</div>
				</div>
				<div class="control-group">
					<div class="controls">
						<button type="button" class="btn" onclick="location.href='${ctx}/page/sys/template/template_list.jsp'">返回</button>
						<button type="button" class="btn btn-primary" onclick="saveTemp();">保存</button>
					</div>
				</div>	    		    
			  </fieldset>
			</form>
			
		  </div>	
	  </div>
	  
	  <div id="textModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="textModalLabel" aria-hidden="true">
		  <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		    <h3 id="textModalLabel">编辑文字标签</h3>
		  </div>
		  <div class="modal-body text-center">
		  	<form id="textForm" action="">
		  		<input type="hidden" id="textEditFlag" value=""><!-- 标记当前是否处于编辑模式 -->
		    	<input class="span6 required" type="text" id="label-text" placeholder="输入文字标签的内容">
		    </form>
		  </div>
		  <div class="modal-footer">
		    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
		    <button class="btn btn-primary" onclick="addTextLabel();">确定</button>
		  </div>
	 </div>	
	 
	 <div id="varModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="varModalLabel" aria-hidden="true">
		  <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		    <h3 id="varModalLabel">选择变量标签</h3>
		  </div>
		  <div class="modal-body text-center">
		  	<form id="varForm" action="">
		  	<input type="hidden" id="varEditFlag" value=""><!-- 标记当前是否处于编辑模式 -->
		    <table class="table table-bordered table-hover">
		    	<caption>变量列表：请选择一个变量，点击确定</caption>
		    	<thead>
		    		<tr>
		    			<th>选择</th>
		    			<th>变量名</th>
		    			<th>描述</th>
		    			<th>示例</th>
		    		</tr>
		    	</thead>
		    	<tbody>
		    		<c:forEach items="${varList}" var="var">
		    		<tr>
		    			<td><input type="radio" name="var" value="【${var.varDesc}】" pre="${var.remark}" class="required" expression="${var.varExpression}"/></td>
		    			<td>${var.varName}</td>
		    			<td>${var.varDesc}</td>
		    			<td>${var.remark}</td>
		    		</tr>
		    		</c:forEach>
		    	</tbody>
		    </table>
		    </form>
		  </div>
		  <div class="modal-footer">
		    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
		    <button class="btn btn-primary" onclick="addVarLabel();">确定</button>
		  </div>
	 </div>		
  </body>
</html>
